<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>站点设置</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        success: '#10B981',
                        warning: '#F59E0B',
                        danger: '#EF4444',
                        gray: {
                            100: '#F3F4F6',
                            200: '#E5E7EB',
                            300: '#D1D5DB',
                            400: '#9CA3AF',
                            500: '#6B7280',
                            600: '#4B5563',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-card {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .setting-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
        }
    </style>
</head>

<body class="bg-gray-100 font-sans text-gray-800">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
            <div class="container mx-auto px-0 py-3 flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <h1 class="text-xl font-bold text-primary flex items-center">
                        <i class="fa fa-book mr-2"></i>
                        <span>睿途题库</span>
                    </h1>
                </div>

                <div class="hidden md:flex items-center space-x-6">
                    <!-- 控制面板 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-tachometer mr-1"></i> 控制面板
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-dashboard mr-2"></i> 仪表盘
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 数据概览
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tasks mr-2"></i> 任务管理
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 教材管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-book mr-1"></i> 教材管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-list mr-2"></i> 版本管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-sitemap mr-2"></i> 章节管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-lightbulb-o mr-2"></i> 知识点管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-exchange mr-2"></i> 版本对比
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 题库管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-database mr-1"></i> 题库管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-question-circle mr-2"></i> 题目管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tags mr-2"></i> 标签管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-filter mr-2"></i> 筛选规则
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-upload mr-2"></i> 批量导入
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 组卷系统 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-files-o mr-1"></i> 组卷系统
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-magic mr-2"></i> 智能组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-edit mr-2"></i> 手动组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-copy mr-2"></i> 试卷模板
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-history mr-2"></i> 历史试卷
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 数据分析 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-bar-chart mr-1"></i> 数据分析
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-pie mr-2"></i> 学习分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-bar mr-2"></i> 成绩统计
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 趋势分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-file-text mr-2"></i> 报告生成
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 系统设置 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 font-medium border-b-2 border-primary pb-1 flex items-center">
                            <i class="fa fa-cog mr-1"></i> 系统设置
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">
                                    <i class="fa fa-cog mr-2"></i> 站点设置
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-users mr-2"></i> 用户管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-shield mr-2"></i> 权限设置
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-database mr-2"></i> 数据备份
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索设置项..."
                            class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>

                    <div class="relative">
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-bell text-xl"></i>
                            <span
                                class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                        </button>
                    </div>

                    <div class="flex items-center space-x-2 cursor-pointer group">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像"
                            class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                        <span class="hidden md:inline font-medium">张老师</span>
                        <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <!-- 面包屑导航 -->
            <div class="flex items-center text-sm text-gray-500 mb-4">
                <a href="#" class="hover:text-primary">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <a href="#" class="hover:text-primary">系统设置</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <span class="text-primary font-medium">站点设置</span>
            </div>
            
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">站点设置</h2>
                <p class="text-gray-500 mt-1">配置系统基本信息、显示选项和功能开关</p>
            </div>

            <div class="flex flex-col lg:flex-row gap-6">
                <!-- 左侧设置导航 -->
                <div class="w-full lg:w-64 flex-shrink-0">
                    <div class="bg-white rounded-lg shadow-card overflow-hidden">
                        <div class="p-4 border-b border-gray-200">
                            <h3 class="font-medium text-gray-800">设置分类</h3>
                        </div>
                        <nav class="p-2">
                            <a href="#basic" class="flex items-center px-3 py-2 text-sm rounded-md mb-1 setting-active">
                                <i class="fa fa-info-circle w-5 text-center mr-3"></i>
                                <span>基本信息</span>
                            </a>
                            <a href="#display" class="flex items-center px-3 py-2 text-sm rounded-md mb-1 text-gray-700 hover:bg-gray-50 transition-all-300">
                                <i class="fa fa-desktop w-5 text-center mr-3"></i>
                                <span>显示设置</span>
                            </a>
                            <a href="#features" class="flex items-center px-3 py-2 text-sm rounded-md mb-1 text-gray-700 hover:bg-gray-50 transition-all-300">
                                <i class="fa fa-puzzle-piece w-5 text-center mr-3"></i>
                                <span>功能开关</span>
                            </a>
                            <a href="#security" class="flex items-center px-3 py-2 text-sm rounded-md mb-1 text-gray-700 hover:bg-gray-50 transition-all-300">
                                <i class="fa fa-shield w-5 text-center mr-3"></i>
                                <span>安全设置</span>
                            </a>
                            <a href="#notifications" class="flex items-center px-3 py-2 text-sm rounded-md mb-1 text-gray-700 hover:bg-gray-50 transition-all-300">
                                <i class="fa fa-bell w-5 text-center mr-3"></i>
                                <span>通知设置</span>
                            </a>
                            <a href="#storage" class="flex items-center px-3 py-2 text-sm rounded-md mb-1 text-gray-700 hover:bg-gray-50 transition-all-300">
                                <i class="fa fa-database w-5 text-center mr-3"></i>
                                <span>存储设置</span>
                            </a>
                            <a href="#integrations" class="flex items-center px-3 py-2 text-sm rounded-md mb-1 text-gray-700 hover:bg-gray-50 transition-all-300">
                                <i class="fa fa-plug w-5 text-center mr-3"></i>
                                <span>第三方集成</span>
                            </a>
                        </nav>
                    </div>
                </div>

                <!-- 右侧设置内容 -->
                <div class="flex-1">
                    <!-- 基本信息设置 -->
                    <div id="basic" class="bg-white rounded-lg shadow-card p-6 mb-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                            <i class="fa fa-info-circle text-primary mr-2"></i>基本信息
                        </h3>
                        <div class="border-t border-gray-200 pt-4">
                            <form>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1" for="siteName">站点名称</label>
                                        <input type="text" id="siteName" value="睿途题库"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                        <p class="mt-1 text-xs text-gray-500">显示在浏览器标题和页面顶部的名称</p>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1" for="siteDomain">站点域名</label>
                                        <input type="text" id="siteDomain" value="www.ruitubank.com"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                        <p class="mt-1 text-xs text-gray-500">网站的访问域名，不包含http://或https://</p>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1" for="siteLogo">站点Logo</label>
                                        <div class="mt-1 flex items-center">
                                            <img src="https://picsum.photos/id/20/80/80" alt="当前Logo" class="h-12 w-12 object-cover rounded mr-4">
                                            <div>
                                                <label class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80 inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm">
                                                    <span>更换Logo</span>
                                                    <input id="siteLogo" name="siteLogo" type="file" class="sr-only" accept="image/*">
                                                </label>
                                                <p class="mt-1 text-xs text-gray-500">推荐尺寸: 200×80px，支持PNG、JPG格式</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1" for="siteFavicon">站点图标(Favicon)</label>
                                        <div class="mt-1 flex items-center">
                                            <img src="https://picsum.photos/id/20/40/40" alt="当前Favicon" class="h-8 w-8 object-cover rounded mr-4">
                                            <div>
                                                <label class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80 inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm">
                                                    <span>更换图标</span>
                                                    <input id="siteFavicon" name="siteFavicon" type="file" class="sr-only" accept="image/*">
                                                </label>
                                                <p class="mt-1 text-xs text-gray-500">推荐尺寸: 32×32px，支持PNG、ICO格式</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium text-gray-700 mb-1" for="siteDescription">站点描述</label>
                                        <textarea id="siteDescription" rows="3"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">睿途题库是一个专业的教育资源平台，提供丰富的教材和试题资源，助力教学与学习。</textarea>
                                        <p class="mt-1 text-xs text-gray-500">用于搜索引擎优化和介绍页面</p>
                                    </div>
                                    
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium text-gray-700 mb-1" for="contactEmail">联系邮箱</label>
                                        <input type="email" id="contactEmail" value="contact@ruitubank.com"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                        <p class="mt-1 text-xs text-gray-500">用于接收系统通知和用户反馈</p>
                                    </div>
                                </div>
                                
                                <div class="mt-6 flex justify-end">
                                    <button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 mr-3">
                                        取消
                                    </button>
                                    <button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
                                        保存设置
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- 显示设置 -->
                    <div id="display" class="bg-white rounded-lg shadow-card p-6 mb-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                            <i class="fa fa-desktop text-primary mr-2"></i>显示设置
                        </h3>
                        <div class="border-t border-gray-200 pt-4">
                            <form>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">默认主题</label>
                                        <div class="space-y-2">
                                            <div class="flex items-center">
                                                <input id="theme-light" name="theme" type="radio" checked
                                                    class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                                <label for="theme-light" class="ml-2 block text-sm text-gray-700">
                                                    浅色主题
                                                </label>
                                            </div>
                                            <div class="flex items-center">
                                                <input id="theme-dark" name="theme" type="radio"
                                                    class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                                <label for="theme-dark" class="ml-2 block text-sm text-gray-700">
                                                    深色主题
                                                </label>
                                            </div>
                                            <div class="flex items-center">
                                                <input id="theme-auto" name="theme" type="radio"
                                                    class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
                                                <label for="theme-auto" class="ml-2 block text-sm text-gray-700">
                                                    自动切换（跟随系统）
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1" for="defaultLanguage">默认语言</label>
                                        <select id="defaultLanguage"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                            <option value="zh-CN" selected>简体中文</option>
                                            <option value="en-US">English (US)</option>
                                            <option value="zh-TW">繁体中文</option>
                                            <option value="ja-JP">日本語</option>
                                        </select>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">显示元素设置</label>
                                        <div class="space-y-2 mt-2">
                                            <div class="flex items-center">
                                                <input id="showBreadcrumb" name="showBreadcrumb" type="checkbox" checked
                                                    class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                                <label for="showBreadcrumb" class="ml-2 block text-sm text-gray-700">
                                                    显示面包屑导航
                                                </label>
                                            </div>
                                            <div class="flex items-center">
                                                <input id="showFooter" name="showFooter" type="checkbox" checked
                                                    class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                                <label for="showFooter" class="ml-2 block text-sm text-gray-700">
                                                    显示页脚信息
                                                </label>
                                            </div>
                                            <div class="flex items-center">
                                                <input id="showUserAvatar" name="showUserAvatar" type="checkbox" checked
                                                    class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                                <label for="showUserAvatar" class="ml-2 block text-sm text-gray-700">
                                                    显示用户头像
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1" for="itemsPerPage">默认每页显示数量</label>
                                        <select id="itemsPerPage"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                            <option value="10">10条/页</option>
                                            <option value="20" selected>20条/页</option>
                                            <option value="50">50条/页</option>
                                            <option value="100">100条/页</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="mt-6 flex justify-end">
                                    <button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 mr-3">
                                        取消
                                    </button>
                                    <button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
                                        保存设置
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- 功能开关 -->
                    <div id="features" class="bg-white rounded-lg shadow-card p-6 mb-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                            <i class="fa fa-puzzle-piece text-primary mr-2"></i>功能开关
                        </h3>
                        <div class="border-t border-gray-200 pt-4">
                            <form>
                                <div class="space-y-6">
                                    <div class="p-4 bg-gray-50 rounded-lg">
                                        <h4 class="font-medium text-gray-800 mb-3">用户功能</h4>
                                        <div class="space-y-3">
                                            <div class="flex items-center justify-between">
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700">用户注册</label>
                                                    <p class="text-xs text-gray-500 mt-0.5">允许新用户注册账号</p>
                                                </div>
                                                <div class="relative inline-block w-10 align-middle select-none">
                                                    <input type="checkbox" id="enableRegistration" checked
                                                        class="sr-only">
                                                    <label for="enableRegistration"
                                                        class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                                </div>
                                            </div>
                                            
                                            <div class="flex items-center justify-between">
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700">第三方登录</label>
                                                    <p class="text-xs text-gray-500 mt-0.5">允许使用微信、QQ等第三方账号登录</p>
                                                </div>
                                                <div class="relative inline-block w-10 align-middle select-none">
                                                    <input type="checkbox" id="enableThirdPartyLogin" checked
                                                        class="sr-only">
                                                    <label for="enableThirdPartyLogin"
                                                        class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                                </div>
                                            </div>
                                            
                                            <div class="flex items-center justify-between">
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700">个人资料编辑</label>
                                                    <p class="text-xs text-gray-500 mt-0.5">允许用户编辑个人资料信息</p>
                                                </div>
                                                <div class="relative inline-block w-10 align-middle select-none">
                                                    <input type="checkbox" id="enableProfileEdit" checked
                                                        class="sr-only">
                                                    <label for="enableProfileEdit"
                                                        class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="p-4 bg-gray-50 rounded-lg">
                                        <h4 class="font-medium text-gray-800 mb-3">内容功能</h4>
                                        <div class="space-y-3">
                                            <div class="flex items-center justify-between">
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700">内容评论</label>
                                                    <p class="text-xs text-gray-500 mt-0.5">允许用户对内容进行评论</p>
                                                </div>
                                                <div class="relative inline-block w-10 align-middle select-none">
                                                    <input type="checkbox" id="enableComments" checked
                                                        class="sr-only">
                                                    <label for="enableComments"
                                                        class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                                </div>
                                            </div>
                                            
                                            <div class="flex items-center justify-between">
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700">内容分享</label>
                                                    <p class="text-xs text-gray-500 mt-0.5">允许用户分享内容到社交媒体</p>
                                                </div>
                                                <div class="relative inline-block w-10 align-middle select-none">
                                                    <input type="checkbox" id="enableSharing" checked
                                                        class="sr-only">
                                                    <label for="enableSharing"
                                                        class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform translate-x-4"></div>
                                                </div>
                                            </div>
                                            
                                            <div class="flex items-center justify-between">
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700">内容下载</label>
                                                    <p class="text-xs text-gray-500 mt-0.5">允许用户下载内容资源</p>
                                                </div>
                                                <div class="relative inline-block w-10 align-middle select-none">
                                                    <input type="checkbox" id="enableDownloads"
                                                        class="sr-only">
                                                    <label for="enableDownloads"
                                                        class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                                                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all duration-300 transform"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mt-6 flex justify-end">
                                    <button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 mr-3">
                                        取消
                                    </button>
                                    <button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
                                        保存设置
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 py-4 mt-8">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="text-center md:text-left mb-4 md:mb-0">
                        <p class="text-sm text-gray-500">© 2025 教材资源管理系统. 保留所有权利.</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-question-circle mr-1"></i> 帮助中心
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-file-text-o mr-1"></i> 使用条款
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-shield mr-1"></i> 隐私政策
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <!-- 保存成功提示 (默认隐藏) -->
    <div id="successToast" class="fixed bottom-6 right-6 bg-success text-white px-4 py-3 rounded-lg shadow-lg flex items-center transform translate-y-20 opacity-0 transition-all-300 z-50">
        <i class="fa fa-check-circle mr-2"></i>
        <span>设置已成功保存</span>
    </div>

    <script>
        // 开关按钮交互
        document.querySelectorAll('input[type="checkbox"]').forEach(toggle => {
            toggle.addEventListener('change', function() {
                const dot = this.parentElement.querySelector('.dot');
                const label = this.nextElementSibling;
                
                if (this.checked) {
                    label.classList.add('bg-primary');
                    label.classList.remove('bg-gray-300');
                    dot.classList.add('translate-x-4');
                    dot.classList.remove('translate-x-0');
                } else {
                    label.classList.remove('bg-primary');
                    label.classList.add('bg-gray-300');
                    dot.classList.remove('translate-x-4');
                    dot.classList.add('translate-x-0');
                }
            });
            
            // 初始化开关状态
            if (toggle.checked) {
                const dot = toggle.parentElement.querySelector('.dot');
                const label = toggle.nextElementSibling;
                label.classList.add('bg-primary');
                label.classList.remove('bg-gray-300');
                dot.classList.add('translate-x-4');
            }
        });

        // 表单提交处理
        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 显示成功提示
                const toast = document.getElementById('successToast');
                toast.classList.remove('translate-y-20', 'opacity-0');
                toast.classList.add('translate-y-0', 'opacity-100');
                
                // 3秒后隐藏提示
                setTimeout(() => {
                    toast.classList.add('translate-y-20', 'opacity-0');
                    toast.classList.remove('translate-y-0', 'opacity-100');
                }, 3000);
            });
        });

        // 取消按钮处理
        document.querySelectorAll('button[type="button"]').forEach(btn => {
            if (btn.textContent.trim() === '取消') {
                btn.addEventListener('click', function() {
                    // 重置表单（实际应用中可能需要根据需求调整）
                    const form = this.closest('form');
                    if (form) {
                        form.reset();
                        // 重置开关状态
                        document.querySelectorAll('input[type="checkbox"]').forEach(toggle => {
                            const dot = toggle.parentElement.querySelector('.dot');
                            const label = toggle.nextElementSibling;
                            
                            if (toggle.checked) {
                                label.classList.add('bg-primary');
                                label.classList.remove('bg-gray-300');
                                dot.classList.add('translate-x-4');
                                dot.classList.remove('translate-x-0');
                            } else {
                                label.classList.remove('bg-primary');
                                label.classList.add('bg-gray-300');
                                dot.classList.remove('translate-x-4');
                                dot.classList.add('translate-x-0');
                            }
                        });
                    }
                });
            }
        });

        // 设置项导航
        document.querySelectorAll('nav a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 更新激活状态
                document.querySelectorAll('nav a').forEach(item => {
                    item.classList.remove('setting-active');
                    item.classList.add('text-gray-700', 'hover:bg-gray-50');
                });
                this.classList.add('setting-active');
                this.classList.remove('text-gray-700', 'hover:bg-gray-50');
                
                // 滚动到对应区域
                const targetId = this.getAttribute('href').substring(1);
                const targetElement = document.getElementById(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 20,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>

</html>
